Быстрый старт Vue 3 - Web-Global: Связывая миры через веб-технологии

Быстрый старт Vue 3

Пост опубликован 13 декабря 2024 в 16:47 и находится в рубриках HTML&CSS. 6
Поделиться:

Попробуйте Vue онлайн

  • Чтобы быстро освоить Vue, вы можете попробовать его прямо на нашей игровой площадке .
  • Если вы предпочитаете простую настройку HTML без каких-либо этапов сборки, вы можете использовать этот JSFiddle в качестве отправной точки.
  • Если вы уже знакомы с Node.js и концепцией инструментов сборки, вы также можете попробовать полную настройку сборки прямо в своем браузере на StackBlitz .

Создание приложения Vue

Предпосылки

  • Знакомство с командной строкой
  • Установите Node.js версии 18.3 или выше

В этом разделе мы покажем, как создать scaffold для Vue Single Page Application на локальной машине. Созданный проект будет использовать сборку на основе Vite и позволит нам использовать Vue Single-File Components (SFC).

Убедитесь, что у вас установлена ​​актуальная версия Node.js и ваш текущий рабочий каталог — тот, в котором вы собираетесь создать проект. Выполните следующую команду в командной строке (без $знака):

npm create vue@latest

Эта команда установит и запустит 
create-vue , официальный инструмент для создания каркасов проектов Vue. Вам будут представлены запросы на несколько дополнительных функций, таких как TypeScript и поддержка тестирования:

Если вы не уверены в выборе, просто выберите его 
No, нажав Enter. После создания проекта следуйте инструкциям по установке зависимостей и запуску сервера разработки:

cd <your-project-name>
npm install
npm run dev

Теперь у вас должен быть запущен ваш первый проект Vue! Обратите внимание, что примеры компонентов в сгенерированном проекте написаны с использованием Composition API и <script setup>, а не Options API . Вот несколько дополнительных советов:

Когда вы будете готовы отправить приложение в производство, выполните следующее:

npm run build

Это создаст готовую к производству сборку вашего приложения в каталоге проекта 
./dist. Ознакомьтесь с 
Руководством по развертыванию в производстве , чтобы узнать больше о доставке вашего приложения в производство.

Источник официальный сайт
https://vuejs.org/guide/quick-start.html